<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>bootstrap</title>
	<link rel="stylesheet" href="../11.16bootstrap/bootstrap3.7/cdn.bootcss.com/bootstrap//3.3.7/css/bootstrap.min.css">
	<!-- <link rel="stylesheet" href="../11.16bootstrap/bootstrap3.7/cdn.bootcss.com/jquery//1.12.4/jquery.min.js">
	<link rel="stylesheet" href="../11.16bootstrap/bootstrap3.7/cdn.bootcss.com/bootstrap//3.3.7/js/bootstrap.min.js"> -->
	<script src="../11.16bootstrap/bootstrap3.7/cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	<script src="../11.16bootstrap/bootstrap3.7/cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style>
		.row{
			border: 3px solid #eee;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-xs-12 col-sm-4 col-md-2 col-lg-1">123</div>
			<div class="col-xs-12 col-sm-4 col-md-2 col-lg-1">456</div>
			<div class="col-xs-12 col-sm-4 col-md-2 col-lg-1">789</div>
		</div>
		<button type="button" class="btn btn-default" aria-label="Left Align">
		  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
		</button>

		<button type="button" class="btn btn-default btn-lg">
		  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
		</button>
		<div class="alert alert-danger" role="alert">
		  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
		  <span class="sr-only">Error:</span>
		  Enter a valid email address
		</div>
		<div class="dropdown">
		  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
		    Dropdown
		    <span class="caret"></span>
		  </button>
		  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
		    <li><a href="#">Action</a></li>
		    <li class="dropdown-header">Dropdown header</li>
		    <li><a href="#">Another action</a></li>
		    <li><a href="#">Something else here</a></li>
		    <li role="separator" class="divider"></li>
		    <li role="separator" class="divider"></li>
		    <li><a href="#">Separated link</a></li>
		    <li><a href="#">Regular link</a></li>
			<li class="disabled"><a href="#">Disabled link</a></li>
			<li><a href="#">Another link</a></li>
		  </ul>
		</div>
		
		<div class="btn-group" role="group" aria-label="...">
		  <button type="button" class="btn btn-default">Left</button>
		  <button type="button" class="btn btn-default">Middle</button>
		  <button type="button" class="btn btn-default">Right</button>
		</div>

		<div class="btn-toolbar" role="toolbar" aria-label="...">
		  <button type="button" class="btn btn-default">Left</button>
		  <button type="button" class="btn btn-default">Middle</button>
		  <button type="button" class="btn btn-default">Right</button>
		  <div class="btn-group" role="group" aria-label="...">
			  <button type="button" class="btn btn-default">Left</button>
			  <button type="button" class="btn btn-default">Middle</button>
			  <button type="button" class="btn btn-default">Right</button>
		  </div>
		</div>

		<div class="btn-group" role="group" aria-label="...">
		  <button type="button" class="btn btn-default">1</button>
		  <button type="button" class="btn btn-default">2</button>

		  <div class="btn-group" role="group">
		    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		      Dropdown
		      <span class="caret"></span>
		    </button>
		    <ul class="dropdown-menu">
		      <li><a href="#">Dropdown link</a></li>
		      <li><a href="#">Dropdown link</a></li>
		    </ul>
		  </div>
		</div>
		
		<div class="btn-group-vertical" role="group" aria-label="...">
		  <div class="btn-group" role="group" aria-label="...">
			  <button type="button" class="btn btn-default">1</button>
			  <button type="button" class="btn btn-default">2</button>

			  <div class="btn-group" role="group">
			    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			      Dropdown
			      <span class="caret"></span>
			    </button>
			    <ul class="dropdown-menu">
			      <li><a href="#">Dropdown link</a></li>
			      <li><a href="#">Dropdown link</a></li>
			    </ul>
			  </div>
			</div>
		</div>

		<div class="btn-group btn-group-justified" role="group" aria-label="...">
		  <div class="btn-group" role="group" aria-label="...">
			  <button type="button" class="btn btn-default">1</button>
			  <button type="button" class="btn btn-default">2</button>

			  <div class="btn-group" role="group">
			    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			      Dropdown
			      <span class="caret"></span>
			    </button>
			    <ul class="dropdown-menu">
			      <li><a href="#">Dropdown link</a></li>
			      <li><a href="#">Dropdown link</a></li>
			    </ul>
			  </div>
			</div>
		</div>
	</div>
</body>
</html>